<template>
  <div>
    <!-- 搜索 -->
    <QueryForm
      :searchForm="searchForm"
      :items="items"
      @search="search"
      @list="list"
    ></QueryForm>
    <!-- 操作按钮区域 -->
    <div class="btn-panel">
      <el-button
        type="success"
        size="small"
        icon="el-icon-plus"
        @click="addChannel"
        >添加栏目</el-button
      >
      <el-button
        type="danger"
        size="small"
        icon="el-icon-delete"
        @click="deleteMany"
        >批量删除</el-button
      >
    </div>
    <!-- 表格 -->
    <Table1
      ref="multipleTable"
      :tableData="tableData"
      :tableCols="tableCols"
      @showEditView="showEditView()"
      @deleteUser="del"
    ></Table1>
    <div style="margin-top: 20px">
      <!-- 分页组件 -->
      <Page1
        :pages="pages"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></Page1>

      <Add v-if="add.visible" :param="add"></Add>
      <Edit v-if="edit.visible" :param="edit"></Edit>
    </div>
  </div>
</template>

<script>
import Add from "./Add";
import Edit from "./Edit";
import Table1 from "@/components/Table1";
import Page1 from "@/components/Page1";
import QueryForm from "@/components/QueryForm";

export default {
  name: "Channel",
  components: { Add, Edit, Table1, Page1, QueryForm },
  data() {
    return {
      tableData: [],
      tableCols: [
        { prop: "id", label: "ID", width: 80 },
        { prop: "name", label: "栏目名称" },
        { prop: "parent_id", label: "上级栏目" },
        { prop: "create_date", label: "创建时间" },
      ], //表格的列
      total: 0,
      pages: 1,
      currentPage: 1,
      size: 10,
      searchForm: {
        //查询的表单
        name: "",
      },
      items: [
        {
          type: "text",
          label: "栏目名称：",
          name: "name",
          placeholder: "按关键字查询查询",
        },
      ],
      add: {
        visible: false,
        close: this.closeDia,
        callback: this.list, //回调
      },
      edit: {
        visible: false,
        close: this.closeDia,
        callback: this.list,
        editForm: null, //传递form表单数据
      },
      // 选择的信息
      selection: {},
    };
  },
  mounted() {
    this.list();

    this.selection = this.$refs["multipleTable"].selection;
  },

  methods: {
    list() {
      let url =
        "/channel/queryPage?currentPage=" +
        this.currentPage +
        "&size=" +
        this.size;
      this.getRequest(url).then((res) => {
        console.log(res, "分页查询的数据");
        this.tableData = res.data;
        this.total = res.total;
        this.pages = res.pages;
      });
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.currentPage = page;
      this.list();
    },
    // 当前size改变
    handleSizeChange(size) {
      this.size = size;
      this.list();
    },
    // 查询
    search() {
      this.postRequest("/channel/queryByCon", this.searchForm).then((res) => {
        if (res) {
          console.log(res, "搜索后的数据");
          this.tableData = res;
        }
      });
    },
    //关闭弹出框
    closeDia() {
      this.add.visible = false;
      this.edit.visible = false;
    },

    // 点击编辑按钮事件
    showEditView() {
      console.log(this.$refs["multipleTable"].data, "编辑事件");
      let data = this.$refs["multipleTable"].data;
      console.log("编辑修改", data);
      this.edit.editForm = data;
      console.log(this.edit.editForm);
      this.edit.visible = true;
    },
    // 删除
    del() {
      console.log(this.$refs["multipleTable"].data, "删除事件");
      let data = this.$refs["multipleTable"].data;
      console.log("删除", data);
      this.$confirm(
        "此操作将永久删除栏目：[" + data.name + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/channel/" + data.id).then((res) => {
            if (res) {
              console.log(res, "删除=======");
              this.$message.success(res.message);
              this.list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    deleteMany() {
      this.selection = this.$refs["multipleTable"].selection;
      console.log(this.selection, "批量删除");
      if (this.selection.length == 0) {
        this.$message.warning("请选择后再删除");
        return;
      }
      this.$confirm(
        "此操作将永久删除 [" + this.selection.length + "]个栏目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids = "?";
          this.selection.forEach((item) => {
            ids += "ids=" + item.id + "&";
          });
          console.log(ids, "ids===");
          this.deleteRequest("/channel/many/" + ids).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加
    addChannel() {
      this.add.visible = true;
    },
  },
};
</script>

<style scoped></style>
